<template>
  <div class="main_box">
    <!-- 轮播图 -->
    <div class="box_swipper">
      <div class="title">易洁家政系统</div>
      <div class="swiper">
        <van-swipe :autoplay="3000">
          <van-swipe-item @click="toSwipeItem(image)" v-for="image in images" :key="image.id">
            <img v-lazy="image.src" height="200px" width="100%" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    
    <!-- 宫格导航 -->
     <div class="box_center">
      <van-grid :gutter="10" :border="false">
        <van-grid-item @click="toGridItem(item)" v-for="item in gridData" :key="item.id" :icon="item.icon" :text="item.text" />
      </van-grid>
    </div>
    
    <!-- 家政服务详情 -->
    <div class="box_detail">
      <van-row gutter="10">
        <van-col span="12" v-for="item in detailList" :key="item.id" @click="toDetail(item)">
          <detailItem 
            :img-url="item.imgUrl" 
            :name="item.name"
            :price="item.price"
          ></detailItem>
        </van-col>
      </van-row>
    </div>
    
    <!-- 家政服务详情弹出层 -->
    <van-popup v-model="show" closeable position="bottom" :style="{ height: '60%' }">
      <div class="popup-content">
        <div class="van_title">{{ detailTemp.name }}详情</div>
        <div class="van_img">
          <img :src="detailTemp.imgUrl" alt="">
        </div>
        <div class="van_price">￥{{ detailTemp.price }}</div>
        <div class="van_discrip">
          <p>服务描述: {{ detailTemp.description }}</p>
          <p>预计时长: {{ detailTemp.duration }}</p>
          <p>已服务: {{ detailTemp.bookCount }}单</p>
        </div>
        <van-button 
          type="primary" 
          block
          @click="handleBook"
          class="book-btn"
        >立即预约</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import detailItem from '@/components/detailItem.vue';
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
  data() {
    return {
      show: false,
      images: [
        {
          id: 1,
          src: 'https://image.chwlsq.com/764/info/6844581_2412190729183870473.jpg',
          path: '/detail'
        },
        {
          id: 2,
          src: "https://qcloud.dpfile.com/pc/bB2XiwZwBkPRyibAkKZ2XGh1YhReX6YXoE99OY78-yQSGGlMSSgiAwikSXh28Nhx.jpg",
          path: '/detail'
        },
        {
          id: 3,
          src: 'https://q6.itc.cn/images01/20240517/e88380720647419c882c7373ecd481d3.jpeg',
          path: '/detail'
        }
      ],
      gridData: [
        {
          id: 1,
          icon: 'hot-o',
          text: '家庭保洁'
        },
        {
          id: 2,
          icon: 'flower-o',
          text: '衣物护理'
        },
        {
          id: 3,
          icon: 'brush-o',
          text: '家具养护',
        },
        {
          id: 4,
          icon: 'tv-o',
          text: '家电清洗'
        }
      ],
      detailList: [
        { 
          id: 1, 
          imgUrl: "https://ts4.tc.mm.bing.net/th/id/OIP-C.XtYduAGUssIxSY2YDvB-BwAAAA?w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2", 
          name: '全屋深度保洁', 
          price: '298', 
          path: "/detail", 
          description: "包含全屋地面、墙面、家具表面的深度清洁，厨房卫生间重点清洁", 
          duration: "4小时", 
          bookCount: 256 
        },
        { 
          id: 2, 
          imgUrl: "https://ts2.tc.mm.bing.net/th/id/OIP-C.jVieruBXezPF_JVJnwYDnQHaE7?w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2", 
          name: '空调深度清洗', 
          price: '199', 
          path: "/detail", 
          description: "专业设备拆洗空调内机，包含滤网、风轮、蒸发器清洗", 
          duration: "2小时", 
          bookCount: 189 
        },
        { 
          id: 3, 
          imgUrl: "https://ts4.tc.mm.bing.net/th/id/OIP-C.B4x-1kPAGamAL8fwtLQlpwHaE8?w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2", 
          name: '沙发地毯清洁', 
          price: '179', 
          path: "/detail", 
          description: "专业设备清洁沙发、地毯，去除深层污渍和螨虫", 
          duration: "3小时", 
          bookCount: 142 
        },
        { 
          id: 4, 
          imgUrl: "https://ts1.tc.mm.bing.net/th/id/OIP-C.B7s9EVvW1IdSZjrCyuO-UQHaE7?w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2", 
          name: '厨房油烟机清洗', 
          price: '249', 
          path: "/detail", 
          description: "专业拆洗油烟机，包含油网、风轮、油杯清洗", 
          duration: "2.5小时", 
          bookCount: 210 
        },
        {
          id: 5,
          imgUrl: "https://ts2.tc.mm.bing.net/th/id/OIP-C.9WEF6OQ2amoAli87aqQizwHaE7?w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
          name: '全屋玻璃清洁',
          price: '299',
          path: "/detail",
          description: "室内外玻璃全面清洁，包含窗框轨道清理",
          duration: "3小时",
          bookCount: 156
        },
        {
          id: 6,
          imgUrl: "https://ts4.tc.mm.bing.net/th/id/OIP-C.3dNIcR3CRUc36OgAI0iStAHaE8?w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
          name: '布艺沙发清洗',
          price: '279',
          path: "/detail",
          description: "专业设备清洗布艺沙发，去渍除螨不伤面料",
          duration: "2.5小时",
          bookCount: 198
        }
      ],
      detailTemp: {}
    }
  },
  methods: {
    toDetail(item) {
      this.show = true;
      this.detailTemp = item;
    },
    // 点击轮播图跳转
    toSwipeItem(image){
      console.log(image);
      this.$router.push(image.path+'/'+image.id)
    },
    // 点击宫格导航跳转
    toGridItem(item){
      this.$router.push('/account/'+item.id)
    },
    // 获取产品所有分类
    handleBook() {
      this.$router.push({
        query: {
          serviceId: this.detailTemp.id,
          serviceName: this.detailTemp.name
        }
      });
      this.show = false;
    }
  },
  components: {
    detailItem
  }
}
</script>

<style scoped>
.main_box {
  height: calc(100vh - 50px);
}
.box_swipper {
  width: 100%;
  height: 200px;
  background-image: linear-gradient(90deg, #ff5f6d, #ffc371);
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  position: relative;
}

.box_swipper .title {
  color: #fff;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
}
.box_swipper .swiper {
  width: 90%;
  position: absolute;
  top: 50px;
  left: 5%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.box_swipper .swiper .van-swipe,
.box_swipper .swiper .van-swipe image {
  border-radius: 10px;
}

.box_center {
  margin-top: 70px;
}

.box_detail {
  margin-top: 10px;
  padding: 0 10px;
}

/* 弹出层样式 */
.van_title,
.van_price {
  font-size: 20px;
  font-weight: 600;
  width: 100%;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin: 10px 0;
}
.van_img {
  height: 180px;
}
.van_img img {
  width: 100%;
  height: 100%;
}
.van_price {
  color: #ff5f6d;
  font-size: 18px;
}
.van_discrip,
.van_img {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}
</style>